<template>
  <div class="parent">
    <px-radio-group v-model="groupValue" @change="radioChange">
      <px-radio-button label="中温系统" value="13-14" />
      <px-radio-button label="低温系统" value="11-12" />
    </px-radio-group>
    <echartDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watchEffect } from "vue";
import echartDom from "./chartDom.vue";
import { getChartData, queryPredicated } from "@/api/machineFreezeHouseAPI";
import { watch } from "fs";

const EQPNAMES = {
  401: "2-2-LCHW-CH-1 Predicted",
  402: "2-2-LCHW-CH-1 Actual",
  403: "2-2-LCHW-CH-2 Predicted",
  404: "2-2-LCHW-CH-2 Actual",
  405: "2-2-LCHW-CH-3 Predicted",
  406: "2-2-LCHW-CH-3 Actual",
  407: "2-2-MCHW-CH-1 Predicted",
  408: "2-2-MCHW-CH-1 Actual",
  409: "2-2-MCHW-CH-2 Predicted",
  410: "2-2-MCHW-CH-2 Actual",
  411: "2-2-MCHW-CH-3 Predicted",
  412: "2-2-MCHW-CH-3 Actual",
  413: "2-2-MCHW-CHR-1 Predicted",
  414: "2-2-MCHW-CHR-1 Actual",
  415: "2-2-MCHW-CHR-2 Predicted",
  416: "2-2-MCHW-CHR-2 Actual",
  417: "2-2-MCHW-CHR-3 Predicted",
  418: "2-2-MCHW-CHR-3 Actual",
  11: "low Temperature Predicted",
  12: "low Temperature Actual",
  13: "Medium Temperature Predicted",
  14: "Medium Temperature Actual"
};

const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  },
  chartData: {
    type: Object,
    default: () => {}
  },
  currentData: {
    type: Object,
    default: () => {}
  }
});
const isShowEcharts = ref(false);
const groupValue = ref("中温系统");
let obj = {
  中温系统: "13-14",
  低温系统: "11-12"
};

const state = reactive({
  option: {},
  axisData: [],
  predicetedCOPDataWidthOptimize: [],
  predicetedCOPDataWidthoutOptimize: [],
  actualCopData: [],
  targetCopData: []
});
const { option, axisData, predicetedCOPDataWidthOptimize, predicetedCOPDataWidthoutOptimize, actualCopData, targetCopData } = toRefs(state);

const requestStatusCodes = {
  "11": "Predicted COP",
  "12": "Actiual COP",
  "13": "External Temperature"
};

// watchEffect(() => {
//   console.log(props.chartData, "props.chartData");
//   axisData.value = [];
//   for (const key in props.chartData) {
//     const element = props.chartData[key];
//     if (key == "31") {
//       element.forEach(item => {
//         axisData.value.push(item.timeValue);
//         predicetedCOPDataWidthOptimize.value.push(item.value);
//       });
//     }
//     if (key == "33") {
//       element.forEach(item => {
//         predicetedCOPDataWidthoutOptimize.value.push(item.value);
//       });
//     }
//     if (key == "32") {
//       element.forEach(item => {
//         actualCopData.value.push(item.value);
//       });
//     }
//     if (key == "34") {
//       element.forEach(item => {
//         targetCopData.value.push(item.value);
//       });
//     }
//   }
//   if (isShowEcharts.value) getoptions();
// });

const getoptions = () => {
  const colors = ["#4786FF", "#FFA299", "green", "purple"];

  let subLineType = obj[groupValue.value]?.split("-")?.map(i => Number(i));

  queryPredicated({
    lineType: [4],
    // subLineType: [401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418],
    subLineType: subLineType,
    timePeriod: "",
    dateRange: "",
    startDate: "",
    endDate: ""
  }).then((res: any) => {
    isShowEcharts.value = true;

    let coolSeriesData = [];
    let coolLengendsData = [];
    let coolLengendsShowData = {};
    let lineKeys = Object.keys(res?.lineInfo);

    coolSeriesData = lineKeys?.map(item => {
      coolLengendsData.push(EQPNAMES[item]);
      if (item == "401" || item == "402") {
        coolLengendsShowData[EQPNAMES[item]] = true;
      } else {
        coolLengendsShowData[EQPNAMES[item]] = false;
      }
      return {
        name: EQPNAMES[item],
        data: res?.lineInfo?.[item].map(item => item.value),
        type: "line",
        smooth: true
      };
    });
    // axisData.value = res?.lineInfo?.[401].map(item => {
    //   return item.timeValue;
    // });
    axisData.value = res?.lineInfo?.[lineKeys[0]].map(item => {
      return item.timeValue;
    });
    const seriesObj = {
      11: "low Temperature",
      12: "low Temperature",
      13: "Medium Temperature",
      14: "Medium Temperature"
    };
    const seriesData = [];
    let data = res?.lineInfo;
    Object.keys(data).forEach((key: string) => {
      seriesData.push(...data[key]);
    });
    const series = [
      {
        name: `${seriesObj[lineKeys[0]]} Predicted COP with Optimization`,
        data: seriesData.filter((item: any) => item.type == lineKeys[0]).map((item: any) => item.value),
        type: "line",
        lineStyle: {
          width: 3,
          color: "#4786FF"
        },
        smooth: true,
        yAxisIndex: 0
      },
      {
        name: `${seriesObj[lineKeys[1]]} Actual COP(SCADA Readings)`,
        data: seriesData.filter((item: any) => item.type == lineKeys[1]).map((item: any) => item.value),
        type: "line",
        lineStyle: {
          color: "#14C7C7",
          width: 3,
          type: "dashed"
        }
      }
    ];
    option.value = {
      backgroundColor: props.type == "dark" ? "#001e3b" : "",
      color: colors,
      title: {
        text: "Predicted, Actual and Target COP",
        top: "2",
        left: "center"
      },
      grid: {
        left: "20px",
        top: "80px",
        right: "10px",
        bottom: "10px",
        containLabel: true
      },
      legend: {
        data: [`${seriesObj[lineKeys[0]]} Predicted COP with Optimization`, `${seriesObj[lineKeys[1]]} Actual COP(SCADA Readings)`],
        top: "30"
      },
      // tooltip: {
      //   trigger: "axis",
      //   confine: true
      // },
      tooltip: {
        trigger: "axis",
        formatter: (val: any) => {
          // console.log(val, "val222");
          const valStrArr = val.map(item => {
            if (item.seriesName === "Prediction Error Band") {
              return `${item.marker}${item.seriesName}:20<br/>`;
            } else {
              return `${item.marker}${item.seriesName}:${item.value}<br/>`;
            }
          });
          return valStrArr.join("");
        }
      },
      xAxis: {
        name: "",
        type: "category",
        boundarGap: false,
        data: axisData.value,
        axisPointer: {
          type: "shadow"
        }
      },
      yAxis: [
        {
          name: "",
          type: "value",
          alignTicks: true,
          position: "left",
          axisLine: {
            show: true,
            lineStyle: {
              color: "#4786FF"
            }
          },
          min: function (value) {
            return Math.floor(value.min * 10) / 10;
          },
          max: function (value) {
            return Math.ceil(value.max * 10) / 10;
          }
        }
      ],
      series: series
    };
    console.log(option.value, "option.-====");
  });

  // console.log(PeriodEnum[2], "PeriodEnum.-====");
};
const radioChange = () => {
  getoptions();
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
